  <template>
    <div style="background: #f5f5f5;">
     <Header></Header>
        <!--        左边菜单框-->
        <div class="div1">
            <div style="padding-bottom: 13px">
             <span style="font-size: 12px;">
                 <router-link to="/">首页</router-link> &nbsp; /  &nbsp;个人中心
            </span>
            </div>
            <div class="div2">
                <div id="div3">
                    <div style="padding-left:36px">
                        <h3 class="title">个人中心</h3>
                    </div>
                    <ul id="ul_1" @click="yingcang()">
                        <li>
                            <router-link to="/User_Portal/User" >我的个人中心 </router-link>
                        </li>
                        <li>
                            <router-link to="/User_Portal/orderlist"  >我的订单 </router-link>
                        </li>
                        <li>
                            <router-link to="/User_Portal/Wallet" >我的钱包 </router-link>
                        </li>
                        <li>
                            <router-link to="/User_Portal/userAddress" >我的收货地址 </router-link>
                        </li>
                        <li>
                            <router-link to="/User_Portal/UpdatePassword" >修改密码 </router-link>
                        </li>
                        <li>
                            <router-link to="/User_Portal/Profile" >个人信息 </router-link>
                        </li>
                        <li>
                          <router-link to="/User_Portal/userMessage" >消息通知</router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <!--            右侧展示-->
            <div class="user">
                <User v-if="zhanshi"></User>
                <router-view></router-view>
            </div>
        </div>
        <div>
            <Foot></Foot>
        </div>
    </div>


</template>

<script>
import Header from '@/components/Header'
import User from "./User"
import Foot from "../Foot"

export default {
        name: "user_portal",
        components:{Header,User,Foot,},
        data() {
            return {
                username: '王陈犇',
                number: 0,
                zhanshi:false,
            }
        },
  methods:{
          yingcang(){
              this.zhanshi = false
          }
        }
    }
</script>

<style scoped>
    #ul_1 a {
        text-decoration: none;
    }

    #ul_1 li{
        padding-top: 20px;
    }

    li {
        list-style: none;
    }

    .div1 {
        width: 1226px;
        height: 800px;
        margin: 0 auto;
    }

    .div2 {
        float: left;
        border: 1px;
        width: 234px;
        min-height: 1px;
        background-color: #fff;
    }

    #div3 {
        margin: 0 35px 12px;
    }

    .title {
        font-size: 16px;
        font-weight: 400;
        line-height: 35px;
        color: #333;
        margin: 0;
        padding: 0;
    }

    .user {
        width: 978px;
        float: left;
        margin-left: 14px;
        min-height: 1px;
        background-color: #fff;
    }

    .img_1 {
        position: absolute;
        left: 680px;
        top: 100px;
        padding: 4px;
        border: 1px solid #e0e0e0;
        border-radius: 150px;
    }

    #div5 {
        float: left;
        width: 302px;
        height: 160px;
        padding-left: 280px;
        padding-top: 100px;
    }

    #div6 {
        margin-top: 97px;
    }

    #div6 ul {
        margin: 0;
        padding: 0;
        color: #757575;
    }

    #div6 ul li {
        padding: 6px 0;
    }

    hr {
        border: none;
        border-bottom: 1px solid #DaDaDa;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
    }

    #div7 ul {
        margin: 0;
        padding: 40px 87px 0;
        list-style-type: none;
        color: #757575
    }

    #div7 ul li {
        float: left;
        width: 276px;
        height: 65px;
        padding-left: 112px;
        padding-top: 15px;
        margin-left: 14px;
        margin-bottom: 80px;
    }

    #img1 {
        position: absolute;
        left: 685px;
        top: 350px;
    }

    #img2 {
        position: absolute;
        left: 1085px;
        top: 350px;
    }

    #img3 {
        position: absolute;
        left: 685px;
        top: 515px;
    }

    #img4 {
        position: absolute;
        left: 1085px;
        top: 515px;
    }


</style>
